<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition>
			<h2 v-show="isShow">欢迎您学习Vue</h2>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'App',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style>
	h2{
		width: 300px;
		background-color: orange;
		transition: 3s linear all;
	}
	/* 离开的起点、来的终点 */
	.v-leave,.v-enter-to{
		transform: translateX(0px);
	}
	/* 离开的终点、来的起点 */
	.v-leave-to,.v-enter{
		transform: translateX(-300px);
	}

</style>